<script setup></script>

<template>
  <div class="page flex-col">
    <div class="header item" v-if="$slots.header">
      <slot name="header"></slot>
    </div>
    <div class="main item flex-1">
      <slot name="default"></slot>
    </div>
    <div class="footer item" v-if="$slots.footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<style scoped lang="less">
  .page > *:not(:first-child) {
    margin-top: 20px;
  }

  .page {
    width: 100%;
    height: 100%;
    padding: var(--padding-2);
    background-color: var(--primary-a30);
  }

  .header,
  .footer {
    padding-inline: var(--padding-2);
    padding-block: 4px;
  }

  .main {
    padding: var(--padding-2);
    border-radius: var(--round-2);
  }

  .item {
    width: 100%;
    overflow: hidden;
    backdrop-filter: blur(10px);
    background-color: var(--primary-a10);
  }
</style>
